<template>
<div class="mindmap">
  <div class="node">
    <div @click="seeNodeDetail(index, item)" class="circle" :class="{
      'green': item.nodeState == 1,
      'red': item.nodeState == 0,
      'orange': item.nodeState == 2,
    }">
      {{ item.percent }}
    </div>

    <div class="name">
      <div v-if="!isEditing" @click="startEdit" class="pointer">{{ item.nodeName }}</div>
      <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput"
        style="width: 200px;" />
    </div>

    <div class="operations">
      <a @click="addBrotherItem(index, item)">同级 +</a>
      <span>|</span>
      <a @click="addChildItem(index, item)">子级 +</a>
      <span>|</span>
      <a @click="deleteItem(index, item)">删除</a>
    </div>

    <div class="info">
      <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
      <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
    </div>

    <div class="btn"><a @click="testIntem(index, item)">编辑</a></div>

    <div v-if="item.children && item.children.length" class="children">
      <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child" :index="childIndex"
        @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem" @deleteItem="deleteItem"
        @testIntem="testIntem" @seeNodeDetail="seeNodeDetail" />
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";
// import { ElMessage } from 'element-plus';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    },
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem', 'seeNodeDetail', 'expandCollapse']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput = ref(null);

const startEdit = () => {
    isEditing.value = true;
    nextTick(() => {
        if (isEditing.value && editInput.value) {
            editInput.value.focus();
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (!editedName.value) {
        // editedName.value = props.item.nodeName;
        return //ElMessage.error("请输入节点名称");
    }
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
    emit('seeNodeDetail', index, item)
};

const expandCollapse = (index, item) => {
    emit('expandCollapse', index, item);
};

onMounted(() => {

});

onUnmounted(() => {

});

</script>

<style lang="scss" scoped>
.mindmap {
  position: relative;
}

.node {
  position: relative;
  margin: 20px;
  text-align: center;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  color: white;
  cursor: pointer;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.name .pointer {
  cursor: pointer;
}

.operations a {
  margin: 0 5px;
  cursor: pointer;
}

.children {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.children::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}
</style>
